import React, {useState} from "react";
import {Button, Flex} from "antd";
import {sceneType} from "./typeData";
import styles from './dataOriginTypeModal.less';

const SceneModal = (props) => {
    // 在这里可以访问传递的数据
    const receivedData = props.data;
    console.log("1211111", receivedData)
    type checkDataType = {
        id: string,
        name: string,
        icon: JSX.Element,
        path: string
    };
    const [checkData, setCheckData] = useState<checkDataType>(sceneType[0]);
    return (
        <div style={{
            width: "100%",
            height: "100%",
            display: "flex",
            flexDirection: "column",
            backgroundColor: "#2e477e"
        }}>
            <div style={{flex: "1 0 40px"}}>
                <Flex wrap="wrap" gap="small" style={{justifyContent: "flex-start", marginLeft: "6%"}}>
                    {sceneType.map((item, index) => (
                        <div style={{width: "30%"}}>
                            <Button 
                                    className={checkData.id === item.id ? styles.imgCheckStyle : styles.imgStyle}
                                    style={{width: "100%", backgroundColor: "#293d76"}} 
                                    size={'large'} 
                                    key={index}
                                    type="primary" 
                                    icon={item.icon}
                                    onClick={() => {
                                        console.log("receivedData----item", item);
                                        setCheckData(item);
                                    }}>{item.name}</Button>
                        </div>
                    ))}
                </Flex>
            </div>
            <div style={{
                height: "40px",
                alignItems: "center",
                display: "flex",
                justifyContent: "flex-end",
                backgroundColor: "#1c295a"
            }}>
                <Button type="primary" style={{backgroundColor: "#293d76"}} onClick={async () => {
                    await window.tm?.ipcRenderer.invoke('closeObsModal');
                }}>关闭</Button>
                <Button type="primary" style={{marginRight: "3%", marginLeft: "3%", backgroundColor: "#293d76"}}
                        onClick={async () => {
                            console.log("checkData", checkData)
                            await window.tm?.ipcRenderer.invoke('showObsModal', {
                                "path": "/ObsManager/addSourceModal",
                                "data": {
                                    sceneName: receivedData.data.sceneName,
                                    typeData: {
                                        id: checkData.id,
                                        name: checkData.name,
                                        path: checkData.path
                                    }
                                }
                            })
                        }}>添加</Button>
            </div>
        </div>
    );
};

export default SceneModal;